<template>
  <div class="kgh-container">
    <div class="section search-section">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6">
          </div>
          <div class="col-xs-12 col-md-6">
             <div class="form-inline search-box">
              <div class="form-group search-form">
                <span class="glyphicon glyphicon-search search-icon"></span>
                <div class="search-input">
                  <input type="text" v-model="searchText">
                </div>
                <button type="button" class="search-btn" @click="fetchCurriculumList()">搜索</button>
              </div>
              <button type="button" class="btn btn-blue" @click="handleToMyInto()">成为专家</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section sec-mrb">
      <div class="container">
        <div class="row section-header">
          <div class="col-xs-12">
            <h2>推荐专家</h2>
          </div>
            
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-3" v-for="item in hotList" :key="item.id">
            <expertItem :item="item"></expertItem>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row section-header">
          <!-- 同首页 hot:0 from:0 -->
          <div class="col-xs-12">
            <h2>科工专家</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-3" v-for="item in techList" :key="item.id">
            <expertItem :item="item"></expertItem>
          </div>
        </div>
        <div class="row text-center load-more" v-if="loadShow">
          <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import util from "@/assets/js/utils.js";
// @ is an alias to /src
import expertItem from "@/components/Expert-Item.vue";
export default {
  name: "course",
  data() {
    return {
      hotList: [],
      techList: [],
      classifyType: 1,
      classifyId: "",
      searchText: "",
      loadShow: true,
      pageNum: 0
    };
  },
  components: {
    expertItem
  },
  created() {
    this.fetchHotList();
    this.fetchTechList();
  },
  methods: {
    fetchHotList() {
      let that = this;
      axios
        .post(
          "/my/techListByClassify",
          qs.stringify({
            id: "",
            hot: 1,
            name: "",
            from: ""
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            that.hotList = response.data.data.slice(0, 4);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fetchTechList() {
      //专家列表
      let that = this;
      axios
        .post(
          "/my/techListByClassify",
          qs.stringify({
            id: "",
            hot: 0,
            name: this.searchText,
            from: this.pageNum
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false;
            that.techList = that.techList.concat(response.data.data);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleToMyInto() {
      // window.open("/#/my/myInto");
      this.$router.push({ path: 'my/myInto' });
    },
    fetchMoreData() {
      // 加载更多
      this.pageNum += 1;
      this.fetchCurriculumList();
    }
  }
};
</script>
